import Configer from "../../../script/frame/apiModel/config/Configer";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import PageContent, {PageContentType} from "../component/PageContent";
import HandBookInfoPage from "./HandBookInfoPage";
import PercentBar from "../component/PercentBar";
import {LightButton} from "parasimon/gui/code/component/LightButton";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {HandBookBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {ColorStr} from "../../../script/type/Type";

interface IProp {
    pageContentType: PageContentType;
    getHandBookExpFun: (player: PlayerModel) => number
    getHandBookFun: (player: PlayerModel) => { [key: string]: number }
}
interface IState {
    handBookId: string;
    x: number;
    y: number;
    lv: number;
    infoVisible: boolean,
    handBook: {[p: string]: number},
    exp: number,
}
export default class HandBookBar extends HandBookBarInterface<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            handBookId: '',
            x: 0,
            lv: 0,
            y: 0,
            infoVisible: false,
            handBook: {},
            exp: 0,
        }
    }

    renderNormal = () => {
        const lineFontSize = 0.01328
        const lineSize = { h: lineFontSize + 0.00830, w: 0.07500 }
        const fontSize = 0.01328;
        const allHandBook = DataRouter.getHandBookDatas();
        let handBookItems: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.handBookGuiItemMaps);
        const barBack = Configer.getResource(ResourceKey.expBarBack);
        const unknowBlp = Configer.getResource(ResourceKey.unknowBlp);
        const buttonBlp = Configer.getResource(ResourceKey.buttonBlp);
        const lineImage = Configer.getResource(ResourceKey.expBar);
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        const iconSize = { h: 0.04980, w: 0.03750 }
        const onePageNum = 8;
        const itemMargin = { l: 0.00625, t: 0.00166 };

        const achBarBoard = Configer.getResource(ResourceKey.achBarBoard);

        return <PageContent  type={this.props.pageContentType} desText={`exp: ${this.state.exp}`} closeFun={this.close}   key={GuiKeys.pageContentHandBook}  hidden={!this.state.visible} selectItemMap={handBookItems} onePageNum={onePageNum} elementsFun={
            (selectKey: number) => {
                return allHandBook.map(
                    (handBookData, index, array) => {
                        const type = handBookData?.type;
                        if (type === selectKey && handBookData && handBookData.id?.length > 0) {
                            const unitId = handBookData.family_tpye;
                            const handBookId = handBookData.id;
                            let backgroundImage = unknowBlp;
                            let disable = true;
                            let mask = disableBlp;
                            let bHide = true;

                            let currentExp = 0;
                            if (this.state.handBook && this.state.handBook[handBookId]) {
                                currentExp = this.state.handBook[handBookId];
                            }
                            const { lv, exp, maxExp } = DataRouterUtil.getLvByHandBookExp(currentExp, handBookData)

                            if (lv > 0) {
                                disable = false;
                                mask = '';
                            }
                            let noStr = 'No.?'
                            if (handBookData.no && handBookData.no >= 0) {
                                noStr = `No.${handBookData.no}`
                            }
                            if (currentExp > 0) {
                                bHide = false;
                                const unitData = DataRouterUtil.getUnitDataByUnitStr(unitId);
                                backgroundImage = DataRouterUtil.getIconUrlByIconData(unitData)
                            }
                            let name = '???';
                            if (exp === 0) {
                            } else {
                                name = `${noStr} ${unitId}`;
                            }
                            const tempLineSize = { h: lineSize.h, w: lineSize.w };

                            return <View    key = {`${GuiKeys.handBookBarItem}|${index}`} style={{ width: 0.16250, height: iconSize.h + tempLineSize.h, marginT: itemMargin.t, marginL: itemMargin.l }}>
                                <View    onMouseEnter={(event) => { this.showInfoPage(event.x + iconSize.w, event.y, lv, handBookId, bHide) }} onMouseLeave={this.closeInfoPage} key={`${GuiKeys.handBookBarIcon}|${index}`} style={{ backgroundImage: backgroundImage, width: iconSize.w, height: iconSize.h, mask }}></View>
                                <View    key={`${GuiKeys.handBookBarText}|${index}`} style={{ width: 0.12500, height: iconSize.h, paddingL: 0.00375, paddingT: 0.00166 }}>
                                    <View    key={`${GuiKeys.handBookBarName}|${index}`} style={{ fontSize: fontSize, width: 0.05000, height: lineFontSize, marginB: 0.01494 }}>{name}</View>
                                    <View    key={`${GuiKeys.handBookBarNameLv}|${index}`} style={{ fontSize: fontSize, width: 0.02500, height: lineFontSize }}>Lv{lv}</View>
                                    <View    key={`${GuiKeys.handBookBarLines}|${index}`} style={{ width: tempLineSize.w, height: lineFontSize }}>
                                        <PercentBar   key={`${GuiKeys.handBookBarLine}|${index}`}  fontSize={fontSize} marginT={0} max={maxExp} current={exp} back={barBack} line={lineImage} width={tempLineSize.w} height={tempLineSize.h} showPercent={false}></PercentBar>
                                    </View>
                                    <LightButton   key={`${GuiKeys.handBookBarLvButton}|${index}`} onMouseDown={(event) => { return this.consumExp(maxExp, exp, handBookId); }} style={{ hidden: (exp === 0), backgroundImage: buttonBlp, fontSize: fontSize, width: 0.02500, height: 0.01660, fontAlign: TextAlign.center, marginL: 0.01250, paddingT: 0.00166 }}>升级</LightButton>
                                </View>
                            </View>
                        } else {
                            return <View    key = {`${GuiKeys.handBookBarItem}|${index}`} style={{ hidden: true }}>
                                <View     key={`${GuiKeys.handBookBarIcon}|${index}`} style={{ hidden: true }}></View>
                                <View    key={`${GuiKeys.handBookBarText}|${index}`} style={{ hidden: true }}>
                                    <View    key={`${GuiKeys.handBookBarName}|${index}`} style={{ hidden: true }}></View>
                                    <View    key={`${GuiKeys.handBookBarNameLv}|${index}`} style={{ hidden: true }}></View>
                                    <View    key={`${GuiKeys.handBookBarLines}|${index}`} style={{ hidden: true }}>
                                        <PercentBar   key={`${GuiKeys.handBookBarLine}|${index}`}  fontSize={fontSize} marginT={0} max={0} current={0} back={barBack} line={lineImage} width={0} height={0} showPercent={false}></PercentBar>
                                    </View>
                                    <LightButton   key={`${GuiKeys.handBookBarLvButton}|${index}`} style={{ hidden: true }}></LightButton>
                                </View>
                            </View>
                        }
                    }
                )
            }
        }>
            <HandBookInfoPage key={GuiKeys.handBookBarInfoCon}   handBookId={this.state.handBookId} x={this.state.x} y={this.state.y} lv={this.state.lv} hidden={!this.state.infoVisible}></HandBookInfoPage>
        </PageContent>
    }

    renderList = () => {
        const lineFontSize = 0.01328
        const lineSize = { h: lineFontSize + 0.00830, w: 0.07500 }
        const fontSize = 0.015;
        const allHandBook = DataRouter.getHandBookDatas();
        let handBookItems: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.handBookGuiItemMaps);
        const unknowBlp = Configer.getResource(ResourceKey.unknowBlp);
        const buttonBlp = Configer.getResource(ResourceKey.upButtonBlp);
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        const barBack = Configer.getResource(ResourceKey.expBarBack);
        const lineImage = Configer.getResource(ResourceKey.expBar);

        const iconSize = { h: 0.06, w: 0.04 }
        const onePageNum = 5;

        const itemSize = { h: 0.36, w: 0.11 };

        const iconMarginL = itemSize.w / 2 - iconSize.w / 2

        const lineMarginL = itemSize.w / 2 - lineSize.w / 2

        const upButtonSize = { h: 0.04, w: 0.04 };
        const upButtonMarginL = itemSize.w / 2 - upButtonSize.w / 2


        return <PageContent  type={this.props.pageContentType} desText={`exp: ${this.state.exp}`} closeFun={this.close}   key={GuiKeys.pageContentHandBook}  hidden={!this.state.visible} selectItemMap={handBookItems} onePageNum={onePageNum} elementsFun={
            (selectKey: number) => {
                return allHandBook.map(
                    (handBookData, index, array) => {
                        const type = handBookData?.type;
                        if (type === selectKey && handBookData && handBookData.id?.length > 0) {
                            const unitId = handBookData.family_tpye;
                            const handBookId = handBookData.id;
                            let backgroundImage = unknowBlp;
                            let disable = true;
                            let mask = disableBlp;
                            let bHide = true;

                            let currentExp = 0;
                            if (this.state.handBook && this.state.handBook[handBookId]) {
                                currentExp = this.state.handBook[handBookId];
                            }
                            const { lv, exp, maxExp } = DataRouterUtil.getLvByHandBookExp(currentExp, handBookData)

                            if (lv > 0) {
                                disable = false;
                                mask = '';
                            }
                            let noStr = 'No.?'
                            if (handBookData.no && handBookData.no >= 0) {
                                noStr = `No.${handBookData.no}`
                            }
                            if (currentExp > 0) {
                                bHide = false;
                                const unitData = DataRouterUtil.getUnitDataByUnitStr(unitId);
                                backgroundImage = DataRouterUtil.getIconUrlByIconData(unitData)
                            }
                            let name = '???';
                            if (exp === 0) {
                            } else {
                                name = `${noStr} ${unitId}`;
                            }
                            const tempLineSize = { h: lineSize.h, w: lineSize.w };

                            return <View    key = {`${GuiKeys.handBookBarItem}|${index}`} style={{ width: itemSize.w, height: itemSize.h }}>
                                <View key={`${GuiKeys.handBookBarNo}|${index}`} style={{ width: itemSize.w, height: fontSize, fontSize: fontSize, marginT: 0.01, color: ColorStr.black }}>{noStr}</View>
                                <View key={`${GuiKeys.handBookBarIconCon}|${index}`} style={{ width: itemSize.w, height: iconSize.h, marginT: 0.06 }}>
                                    <View    onMouseEnter={(event) => { this.showInfoPage(event.x + iconSize.w, event.y, lv, handBookId, bHide) }} onMouseLeave={this.closeInfoPage} key={`${GuiKeys.handBookBarIcon}|${index}`} style={{ backgroundImage: backgroundImage, width: iconSize.w, height: iconSize.h, mask, marginL: iconMarginL }}></View>
                                </View>
                                <View key={`${GuiKeys.handBookBarText}|${index}`} style={{ width: itemSize.w, height: iconSize.h }}>
                                    <View key={`${GuiKeys.handBookBarName}|${index}`} style={{ fontSize: 0.02, width: itemSize.w, height: lineFontSize, marginT: 0.03, fontAlign: TextAlign.center, color: ColorStr.black }}>{name}</View>
                                    <View key={`${GuiKeys.handBookBarNameLv}|${index}`} style={{ fontSize: fontSize, width: itemSize.w, height: lineFontSize, fontAlign: TextAlign.center, marginT: 0.01, color: ColorStr.black }}>等级：{lv}</View>
                                    <View key={`${GuiKeys.handBookBarLines}|${index}`} style={{ width: tempLineSize.w, height: lineFontSize, marginL: lineMarginL, marginT: 0.01 }}>
                                        <PercentBar   key={`${GuiKeys.handBookBarLine}|${index}`}  fontSize={fontSize} marginT={0} max={maxExp} current={exp} back={barBack} line={lineImage} width={tempLineSize.w} height={tempLineSize.h} showPercent={false}></PercentBar>
                                    </View>
                                    <LightButton   key={`${GuiKeys.handBookBarLvButton}|${index}`} onMouseDown={(event) => { return this.consumExp(maxExp, exp, handBookId); }} style={{ hidden: (exp === 0), backgroundImage: buttonBlp, width: upButtonSize.w, height: upButtonSize.h,  marginL: upButtonMarginL, marginT: 0.03 }}></LightButton>
                                </View>
                            </View>
                        } else {
                            return <View    key = {`${GuiKeys.handBookBarItem}|${index}`} style={{ hidden: true }}>
                                <View key={`${GuiKeys.handBookBarNo}|${index}`} style={{ hidden: true }}></View>
                                <View key={`${GuiKeys.handBookBarIconCon}|${index}`} style={{ hidden: true }}>
                                    <View key={`${GuiKeys.handBookBarIcon}|${index}`} style={{ hidden: true }}></View>
                                </View>
                                <View key={`${GuiKeys.handBookBarText}|${index}`} style={{ hidden: true }}>
                                    <View key={`${GuiKeys.handBookBarName}|${index}`} style={{ hidden: true }}></View>
                                    <View key={`${GuiKeys.handBookBarNameLv}|${index}`} style={{ hidden: true }}></View>
                                    <View key={`${GuiKeys.handBookBarLines}|${index}`} style={{ hidden: true }}>
                                        <PercentBar   key={`${GuiKeys.handBookBarLine}|${index}`}  fontSize={fontSize} marginT={0} max={0} current={0} back={barBack} line={lineImage} width={0} height={0} showPercent={false}></PercentBar>
                                    </View>
                                    <LightButton   key={`${GuiKeys.handBookBarLvButton}|${index}`} style={{ hidden: true }}></LightButton>
                                </View>
                            </View>
                        }
                    }
                )
            }
        }>
            <HandBookInfoPage key={GuiKeys.handBookBarInfoCon}   handBookId={this.state.handBookId} x={this.state.x} y={this.state.y} lv={this.state.lv} hidden={!this.state.infoVisible}></HandBookInfoPage>
        </PageContent>
    }

    render = () => {
        if (this.props.pageContentType === PageContentType.list) {
            return this.renderList()
        } else {
            return this.renderNormal()
        }
    }

    consumExp = (maxExp: number, exp: number, handBookId: string) => {
        const tempExp = maxExp - exp;
        if (tempExp > 0) {
            const syncData: UISyncData = { id: SyncId.consumeExp, param: { exp: tempExp, handBookId: handBookId } };
            return syncData
        } else {
            Logger.toastProduct('当前图鉴已经满级，无法继续提升', PlayerFactory.getInstance().getLocalPlayer());
        }
    }

    showInfoPage = (x: number, y: number, lv: number, handBookId: string, disable: boolean) => {
        if (disable) {
            return;
        }
        this.setState({
            ...this.state,
            x,
            y,
            lv,
            handBookId,
            infoVisible: true,
        })
    }

    closeInfoPage = () => {
        this.setState({
            ...this.state,
            infoVisible: false,
        })
    }

    close = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.handBookBar } };
        return syncData;
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }
    openBar = () => {
        const handBook = this.props.getHandBookFun(PlayerFactory.getInstance().getLocalPlayer());
        const exp = this.props.getHandBookExpFun(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            visible: true,
            handBook,
            exp,
        })
    }
    getVisible = () => {
        return this.state.visible;
    }
}